<template>
    <div class="tips" v-show="tiptag">
        <div class="content">
            <p class="text">{{Text}}</p>
            <div class="Btns">
                <div class="btn-l " @click="close(leftBt)">{{LeftBtn}}</div>
                <div class="btn-r" @click="close(rightBt)">{{RightBtn}}</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        tiptag:{
            type:Boolean,
            default:false
        },
        Text:{
            type: String,
            default: ''
        },
        LeftBtn:{
            type: String,
            default: '取消'
        },
        RightBtn:{
            type: String,
            default: '确认'
        }
    },
    methods:{
        close(bt){
            this.$emit('closeTip',bt)
        }
    }
    
}
</script>
<style lang="stylus">
    .tips{
        position fixed
        top 0
        left 0
        background rgba(255,255,255,0.3)
        width 100%
        height 100%
        .content{
            width 200px
            height 100px
            border-radius 30px
            position absolute
            left 50%
            top 30%
            transform translate(-50%)
            background #fff

            .text{
                color #333
                font-size 15px
                text-align center
                line-height 50px
            }
            .btn-l,
            .btn-r{
                width 50px
                height 20px
                background rgba(183,133,133,1)
                position absolute
                bottom 10px
                text-align center
                border-radius 10px
            }
            .btn-l{
                left 10px
            }
            .btn-r{
                right 10px
            }

        }
    }
</style>